<!--
 * @description: 分镜tabs
 * @fileName: index
 * @author: 17076
 * @date: 2025/3/19-下午1:26
 * @version: V1.0.0
-->

<template>
  <div>
    <el-row :gutter="10">
      <!--左侧文生图及预览图片区-->
      <el-col :xs="18" :sm="18" :md="18" :lg="19" :xl="20">
        <div class="left-content" :style="{ height: $baseTableHeight(-120) + 'px' }">
          <!--文生图参数区-->
          <el-col :xs="12" :sm="12" :md="9" :lg="9" :xl="7" style="height: 100%">
            <div class="edit-content" :style="{ height: showDetails ? '100%' : '300px' }">
              <span class="bold-title">{{ `图像生成（${ selectLens ? selectLens['index'] : ''}）` }}</span>
              <div
                class="edit-form-content"
                :style="{
                  height: (showDetails ? 'calc( 100% - 60px - 20px )' : 'calc( 300px - 80px - 20px )')
                }"
              >
                <el-form ref="form" :model="editForm" :rules="rules" label-width="90px" label-position="top">
                  <el-form-item label="提示词" prop="promptRichText">
                    <el-popover
                      ref="rolePopup"
                      v-model="showRolePopup"
                      placement="right"
                      trigger="manual"
                      popper-class="prompt-popup"
                    >
                      <!-- 角色选择弹窗 -->
                      <div id="role-select-popup" class="role-popup">
                        <el-input
                          ref="roleInput"
                          v-model="searchVal"
                          class="role-input"
                          placeholder="输入名称查询"
                          clearable
                          @keyup.native="inputKeyupHandler"
                        />
                        <div v-if="searchedList.length > 0" class="role-popup-content">
                          <div
                            v-for="item in searchedList"
                            :key="item.id"
                            class="role-item"
                            @click="handleInsertRole(item)"
                          >
                            {{ `${item.name}-${item.dress}-${item.angle}` }}
                          </div>
                        </div>
                        <el-empty v-else class="role-popup-empty" description="暂无角色形象可选择,请前往角色设定添加角色形象">
                          <template slot="image">
                            <img src="@/assets/common/empty_role.png">
                          </template>
                        </el-empty>
                      </div>
                      <div slot="reference">
                        <div ref="prompt" :class="['prompt-content', isFullscreen ? 'prompt-content-full' : '']">
                          <!--                        <el-input
                                                  v-model="editForm['prompt']"
                                                  type="textarea"
                                                  :rows="6"
                                                  placeholder="请输入提示词"
                                                  @keydown.native="handleKeyDown"
                                                  @input.native="handleInput"
                                                />-->
                          <prompt-editor
                            ref="editor"
                            v-model="editForm['promptRichText']"
                            @update="(text) => { $set(editForm, 'promptRichText', text) }"
                            @showModal="handleToggleRolePopup"
                          />
                          <!--                        <div class="flex-row prompt-toolbar">
                            &lt;!&ndash;                        <svg-icon icon-class="prompt_picture" @click="handleUploadLens(false)" />&ndash;&gt;
                            &lt;!&ndash;                        <svg-icon icon-class="prompt_lens" @click="() => { $refs.select.show() }" />&ndash;&gt;
                            <svg-icon icon-class="prompt_clear" @click="() => { $set(editForm, 'prompt', '') }" />
                            <svg-icon :icon-class="isFullscreen ? 'quit-full-screen' : 'full-screen'" @click.prevent="handleTogglePromptFull" />
                          </div>-->
                          <i v-if="translating" class="el-icon-loading change-loading" />
                        </div>
                        <div v-if="selectLens" class="flex-row roles-tags">
                          <template v-for="item in selectLens['roleName']">
                            <span
                              :key="item.id"
                              class="role-tag-item"
                              @click="handleRoleTagClick(item)"
                            >{{ item.name }}</span>
                          </template>
                        </div>
                      </div>
                    </el-popover>
                    <el-tooltip placement="top" content="智能推荐">
                      <svg-icon icon-class="prompt_recommend" class="prompt-recommend" @click="handleRecommend(editForm.prompt)" />
                    </el-tooltip>
                    <svg-icon :icon-class="formatterLanguageIcon(editForm['promptRichText'])" class="prompt-language" @click="handleLanguageChange(editForm.promptRichText)" />
                    <!--                    <svg-icon icon-class="copy" class="prompt-copy" @click="handleCopyPrompt(editForm.prompt)" />-->
                  </el-form-item>
                  <template v-if="showDetails">
                    <el-form-item label="提示标签" prop="promptTags">
                      <div class="prompt-tag">
                        <el-segmented
                          v-model="activeTabs"
                          :options="allTagsList"
                          show-extra
                          :extra-option="{ label: 'name', value: 'id' }"
                          @more="handleMoreTagClick"
                        />
                        <div class="flex-row prompt-tag-content">
                          <span
                            v-for="(item, index) in formatterSubTag()"
                            :key="index"
                            @click="handleTagClick(item)"
                          >{{ item.name }}</span>
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item label="参考素材" prop="referenceMaterial">
                      <el-upload
                        v-if="!editForm['referenceMaterial']"
                        class="upload-demo"
                        :action="uploadOption.action"
                        :headers="uploadOption.headers"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        :limit="1"
                        drag
                        accept=".jpg,.png,.jpeg"
                        :file-list="fileList"
                        :show-file-list="false"
                      >
                        <i class="el-icon-picture-outline" />
                        <div>点击<em>本地上传</em>或将图片拖拽到这里</div>
                        <div class="el-upload__tip">只能上传jpg/jpeg/png文件，且不超过10MB</div>
                      </el-upload>
                      <svg-icon
                        v-if="!editForm['referenceMaterial']"
                        icon-class="prompt_lens"
                        class="prompt-lens-icon"
                        @click="() => { $refs.select.show() }"
                      />
                      <div v-else class="prompt-image">
                        <el-image :src="downloadUrl + editForm['referenceMaterial']" />
                        <div class="flex-row prompt-image-toolbar">
                          <i class="el-icon-picture-outline" @click="handleUploadLens(false)" />
                          <i class="el-icon-camera" @click="() => { $refs.select.show(); isSelectLens = true }" />
                          <i class="el-icon-delete" @click="handleRemove" />
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item label="选择模型" prop="modelCode">
                      <el-select v-model="editForm['modelCode']" clearable placeholder="请选择模型">
                        <el-option
                          v-for="item in modelList"
                          :key="item.code.toString()"
                          :label="item.name"
                          :value="item.code.toString()"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="生成数量" prop="createNum">
                      <div class="flex-row create-num-content">
                        <span
                          v-for="item in createNumList"
                          :key="item.value"
                          :class="{ 'create-num-item': true, 'active': editForm['createNum'] === item.value }"
                          @click="handleCreateNumChange(item.value)"
                        >{{ item.name }}</span>
                      </div>
                    </el-form-item>
                    <el-form-item label="画面比例" prop="pictureScale">
                      <el-select v-model="editForm['pictureScale']" placeholder="请选择" @change="handleScaleChange">
                        <el-option
                          v-for="item in pictureScaleList"
                          :key="item.code"
                          :label="item['name']"
                          :value="item.code"
                        >
                          <div class="flex-row" style="align-items: center">
                            <div class="picture-scale-placeholder">
                              <div class="picture-scale-tag" :data-ratio="item.code" />
                            </div>
                            <span style="margin-left: 10px">{{ item['name'] }}</span>
                          </div>
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="图像大小" prop="pictureSize">
                      <div class="flex-row create-num-content">
                        <el-input v-model="editForm.imageWidth" type="number" placeholder="图片宽" clearable />
                        <i
                          class="el-icon-link link-icon"
                          :style="{ color: editForm['isLink'] === '1' ? '#FFFFFF' : '#58636E' }"
                          @click="handleLinkChange(editForm['isLink'])"
                        />
                        <el-input v-model="editForm.imageHeight" type="number" placeholder="图片高" clearable />
                      </div>
                    </el-form-item>
                    <el-form-item prop="steps">
                      <template slot="label">
                        <div class="flex-row" style="align-items: center">
                          <span>采样迭代步数</span>
                          <span style="color: #B6C7D1;font-size: 12px;margin-left: 8px">(Sampling Steps)</span>
                          <el-tooltip effect="dark" content="步数越多,细节越好,但生成时间越长" placement="top-start">
                            <i class="el-icon-warning" style="color: #B6C7D1;margin-left: 8px" />
                          </el-tooltip>
                        </div>
                      </template>
                      <el-slider
                        v-model="editForm.steps"
                        :min="20"
                        :max="100"
                        show-input
                      />
                    </el-form-item>
                    <el-form-item prop="cfg">
                      <template slot="label">
                        <div class="flex-row" style="align-items: center">
                          <span>提示词相关性</span>
                          <span style="color: #B6C7D1;font-size: 12px;margin-left: 8px">(CFG Scale)</span>
                          <el-tooltip effect="dark" content="数值越大,创意性越强" placement="top-start">
                            <i class="el-icon-warning" style="color: #B6C7D1;margin-left: 8px" />
                          </el-tooltip>
                        </div>
                      </template>
                      <el-slider
                        v-model="editForm.cfg"
                        :min="0.00"
                        :max="100.00"
                        :step="0.01"
                        show-input
                      />
                    </el-form-item>
                    <!--                    <el-form-item label="采样方法 (Sampler)" prop="sampler">
                      <template slot="label">
                        <span>采样方法<i style="color: #B6C7D1;font-size: 12px;margin-left: 8px;font-style: normal">(Sampler)</i></span>
                      </template>
                      <el-select v-model="editForm['sampler']" :disabled="!editForm.modelCode" filterable clearable placeholder="请选择采样方法">
                        <el-option
                          v-for="item in samplerList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>-->
                    <el-form-item prop="seed">
                      <template slot="label">
                        <div class="flex-row">
                          <span>随机种子</span>
                          <span style="color: #B6C7D1;font-size: 12px;margin-left: 8px">(Seed)</span>
                        </div>
                      </template>
                      <div class="flex-row" style="align-items: center">
                        <el-input-number v-model="editForm['seed']" placeholder="随机生成" class="seed-input" />
                        <i class="el-icon-refresh" style="cursor: pointer;font-size: 20px;margin-left: 8px" title="随机生成" @click="handleRandomGenerate" />
                      </div>
                    </el-form-item>
                  </template>
                </el-form>
              </div>
              <div class="flex-row edit-bottom-bar">
                <el-button class="liner-button" :loading="generateLoading" style="flex: 1" @click="startGenerate">
                  <svg-icon icon-class="create_icon" style="width: 14px; height: 14px;margin-right: 8px" />
                  开始生成
                </el-button>
                <svg-icon :icon-class="showDetails ? 'pick_up' : 'unfold'" @click="() => { showDetails = !showDetails }" />
              </div>
            </div>
            <div v-if="!showDetails" class="generate-history-content">
              <div class="flex-row" style="justify-content: space-between;height: 20px;line-height: 20px">
                <span class="bold-title">{{ generateHistoryList.length > 0 ? '生成历史' : '暂无生成历史' }}</span>
                <svg-icon v-if="generateHistoryList.length > 0" icon-class="clear_icon" style="cursor: pointer" @click.stop="handleClearGenerate" />
              </div>
              <div class="history-list">
                <div v-for="item in generateHistoryList" :key="item.id">
                  <p class="flex-row" style="font-size: 12px;color: #B6C7D1; justify-content: space-between">
                    <span>{{ item['createTime'] }}</span>
                    <i class="el-icon-delete" style="cursor: pointer" @click.stop="handleDeleteGenerate(item)" />
                  </p>
                  <div class="flex-row generate-history">
                    <div
                      v-for="(subItem, subIndex) in item['imageList']"
                      :key="subIndex"
                      :class="['generate-history-image', item['imageList'].length > 1 ? 'multiple-history-image' : '', subItem['imageId'] === currentGenerateHistoryImageId ? 'active' : '']"
                      :style="{ marginLeft: subIndex > 1? '10px' : '0' }"
                      :data-ratio="item['pictureScale']"
                      @click.stop="handleSelectImage(item, subItem)"
                    >
                      <el-popover placement="top" trigger="hover" :close-delay="0" popper-class="params-popover">
                        <div class="params-popover-content" @dblclick="handleReusePrompt(item)">
                          <div>双击应用提示词及模型参数</div>
                          <div>
                            {{ `提示词: ${item.prompt} 模型:${item['templateName']} 画面比例:${item['pictureScaleName']} 采样迭代步数:${item.steps} 提示词相关性:${item.cfg} 随机种子:${item.seed}` }}
                          </div>
                        </div>
                        <el-image slot="reference" :src="downloadUrl + subItem['imageId']" />
                      </el-popover>
                      <el-dropdown class="more-button-content" @command="handleCommand($event, item, subItem)">
                        <div class="more-button">
                          <i class="el-icon-more" />
                        </div>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-tickets" command="1">提示复用</el-dropdown-item>
                          <el-dropdown-item icon="el-icon-s-operation" command="2">参数复用</el-dropdown-item>
                          <el-dropdown-item icon="el-icon-full-screen" command="3">放大</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <!--预览区-->
          <el-col :xs="12" :sm="12" :md="15" :lg="15" :xl="17" style="border-left: 1px solid #39414E;height: 100%">
            <div class="image-show-content">
              <!--图片下载\放大-->
              <div class="flex-row top-image-attribute">
                <i class="el-icon-upload2" title="上传封面" @click.stop="handleUploadLens(true)" />
                <i class="el-icon-download" title="下载图片" @click.stop="handleDownloadLensFrameImage" />
                <i class="el-icon-full-screen" title="放大图片" @click.stop="handleFullLensFrame" />
              </div>
              <!--图片显示区-->
              <div class="image-view">
                <!--生成中-->
                <template v-if="generatingList.length > 0">
                  <!--一张图片正在生成-->
                  <template v-if="generatingList.length === 1">
                    <div v-if="generateLoading" class="flex-row loading-image" :data-ratio="editForm['pictureScale']">
                      <i class="el-icon-loading" />
                    </div>
                    <div v-else class="center-image" style="margin: 0 auto" :data-ratio="editForm['pictureScale']">
                      <el-image :src="downloadUrl + generatingList[0].imageId" style="width: 100%; height: 100%">
                        <div slot="error" class="flex-column flex-center error-content">
                          <i class="el-icon-picture-outline" />
                          <span>暂无图片</span>
                        </div>
                      </el-image>
                      <div class="lens-tag">
                        <el-checkbox
                          v-model="generatingList[0]['currentFrame']"
                          true-label="00"
                          false-label="01"
                          label="设为镜头"
                          @input="handleSetLens($event,generatingList[0])"
                        />
                      </div>
                    </div>
                  </template>
                  <!--多张图片正在生成-->
                  <el-row v-else :gutter="10" style="width: 100%; height: 100%">
                    <el-col
                      v-for="(item, index) in generatingList"
                      :key="index"
                      :span="12"
                      :style="{
                        height: generatingList.length > 2 ? 'calc( 50% - 10px )' : '100%',
                        marginBottom: generatingList.length > 2 ? '10px' : '0'
                      }"
                    >
                      <div v-if="generateLoading" class="flex-row loading-image" :data-ratio="editForm['pictureScale']">
                        <i class="el-icon-loading" />
                      </div>
                      <div
                        v-else
                        :class="['center-image', currentGenerateImage === index ? 'active' : '']"
                        :data-ratio="editForm['pictureScale']"
                        @click="handleGenerateSelectImage(item, index)"
                      >
                        <el-image :src="downloadUrl + item.imageId" style="width: 100%; height: 100%">
                          <div slot="error" class="flex-column flex-center error-content">
                            <i class="el-icon-picture-outline" />
                            <span>暂无图片</span>
                          </div>
                        </el-image>
                        <div class="lens-tag">
                          <el-checkbox
                            v-model="item['currentFrame']"
                            true-label="00"
                            false-label="01"
                            label="设为镜头"
                            @input="handleSetLens($event,item)"
                          />
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </template>
                <!--生成完成-->
                <template v-else>
                  <template v-if="generateHistoryRecurrence.length > 0">
                    <!--一张图片正在生成-->
                    <template v-if="generateHistoryRecurrence.length === 1">
                      <div class="center-image" style="margin: 0 auto" :data-ratio="editForm['pictureScale']">
                        <el-image :src="downloadUrl + generateHistoryRecurrence[0].imageId" style="width: 100%; height: 100%">
                          <div slot="error" class="flex-column flex-center error-content">
                            <i class="el-icon-picture-outline" />
                            <span>暂无图片</span>
                          </div>
                        </el-image>
                        <div class="lens-tag">
                          <el-checkbox
                            v-model="generateHistoryRecurrence[0]['currentFrame']"
                            true-label="00"
                            false-label="01"
                            label="设为镜头"
                            @input="handleSetLens($event,generateHistoryRecurrence[0])"
                          />
                        </div>
                      </div>
                    </template>
                    <!--多张图片正在生成-->
                    <el-row v-else :gutter="10" style="width: 100%; height: 100%">
                      <el-col
                        v-for="(item, index) in generateHistoryRecurrence"
                        :key="index"
                        :span="12"
                        :style="{
                          height: generateHistoryRecurrence.length > 2 ? 'calc( 50% - 10px )' : '100%',
                          marginBottom: generateHistoryRecurrence.length > 2 ? '10px' : '0'
                        }"
                      >
                        <div
                          :class="['center-image', currentGenerateImage === index ? 'active' : '']"
                          :data-ratio="editForm['pictureScale']"
                          @click="handleGenerateSelectImage(item, index)"
                        >
                          <el-image :src="downloadUrl + item.imageId" style="width: 100%; height: 100%">
                            <div slot="error" class="flex-column flex-center error-content">
                              <i class="el-icon-picture-outline" />
                              <span>暂无图片</span>
                            </div>
                          </el-image>
                          <div class="lens-tag">
                            <el-checkbox
                              v-model="item['currentFrame']"
                              true-label="00"
                              false-label="01"
                              label="设为镜头"
                              @input="handleSetLens($event,item)"
                            />
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </template>
                  <template v-else>
                    <!--镜头存在图片-->
                    <div v-if="Object.keys(currentHistoryImageData).length > 0" class="flex-row image-container">
                      <div class="center-image" :data-ratio="editForm['pictureScale']">
                        <img :src="downloadUrl + currentHistoryImageData.imageId">
                        <div class="lens-tag">
                          <el-checkbox
                            v-model="currentHistoryImageData['currentFrame']"
                            true-label="00"
                            false-label="01"
                            label="设为镜头"
                            @input="handleSetLens($event,currentHistoryImageData)"
                          />
                        </div>
                      </div>
                    </div>
                    <!--镜头不存在图片,显示占位图-->
                    <div v-else class="flex-column flex-center image-container">
                      <img src="~@/assets/write/empty_icon.png" style="width: 150px; height: 150px; object-fit: contain">
                      <span style="font-size: 12px; color: #B6C7D1">生成 AI 素左侧填描述一键出图</span>
                      <span style="font-size: 12px; color: #B6C7D1;margin-top: 5px">已有素材，<em @click="handleUploadLens(true)">点击上传</em>本地选取</span>
                    </div>
                  </template>
                </template>
              </div>
              <!--历史镜头区-->
              <div v-show="historyLensList.length > 0" class="history-content">
                <span class="bold-title">{{ historyLensList.length === 0 ? '暂无历史镜头' : '历史镜头' }}</span>
                <div class="swiper-container">
                  <div class="swiper-wrapper" style="height: 100%">
                    <div
                      v-for="(history, historyIndex) in historyLensList"
                      :key="historyIndex"
                      :class="['swiper-slide', 'flex-column', 'flex-center', currentHistoryImage === historyIndex ? 'active' : '']"
                      @click.stop="handleSelectHistory(historyIndex)"
                    >
                      <div class="swiper-slide-image" :data-ratio="history['pictureScale']">
                        <el-image :src="downloadUrl + history.imageId" />
                        <div v-if="history['currentFrame'] === '00'" class="current-lens-tag">当前镜头</div>
                        <div class="tool-bar" title="提示词复用" style="right: 40px" @click.stop="handleReusePrompt(history)">
                          <i class="el-icon-tickets" />
                        </div>
                        <div class="tool-bar" title="放大" @click.stop="handleFull(history)">
                          <i class="el-icon-full-screen" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-show="historyLensList.length > 0" class="flex-row flex-center pre-button">
                  <i class="el-icon-arrow-left" />
                </div>
                <div v-show="historyLensList.length > 0" class="flex-row flex-center next-button">
                  <i class="el-icon-arrow-right" />
                </div>
              </div>
            </div>
          </el-col>
        </div>
      </el-col>
      <!--右侧镜头列表-->
      <el-col :xs="6" :sm="6" :md="6" :lg="5" :xl="4">
        <base-card title="分镜内容">
          <div class="flex-column right-content" :style="{ height: $baseTableHeight(-60) + 'px' }">
            <div v-if="selectLens" class="lens-info-content">
              <div v-if="!showMore">{{ `描述:${selectLens['lensDesc'] ? selectLens['lensDesc'] : '-'}` }}</div>
              <div v-else>
                <div>{{ `描述:${selectLens['lensDesc'] ? selectLens['lensDesc'] : '-'}` }}</div>
                <div>{{ `场景:${selectLens['scenery'] ? selectLens['scenery'] : '-'}` }}</div>
                <div>{{ `剧情:${selectLens['plot'] ? selectLens['plot'] : '-'}` }}</div>
                <!--                <div>{{ `原文:${selectLens['originalSnippet'] ? selectLens['originalSnippet'][0] : '-'}` }}</div>-->
                <div>{{ `角色:${formatterRoleName(selectLens['roleName'])}` }}</div>
                <div>
                  <span>时间: {{ selectLens['lensTimeName'] }}</span>
                  <span style="margin-left: 10px">景别: {{ selectLens['shotSizeName'] }}</span>
                </div>
              </div>
              <div class="show-more-button" @click="() => { showMore = !showMore }">
                <i :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
              </div>
            </div>
            <el-empty v-else description="暂无分镜内容" style="height: 200px">
              <template slot="image">
                <img src="@/assets/common/empty_role.png">
              </template>
            </el-empty>
            <div class="flex-row right-header">
              <i class="left-border" />
              <span>分镜镜头</span>
            </div>
            <div :style="{ flex: '1', overflow: 'auto', marginTop: '10px' }">
              <div v-for="(item, index) in allLensList" :key="item.id" class="flex-column lens-frame-item">
                <div class="flex-row add-lens" @click="handleAddLens(item, index)">
                  <i class="el-icon-circle-plus-outline" />
                  <span style="font-size: 12px">添加</span>
                </div>
                <div
                  :id="`lensFrame${index}`"
                  :class="['flex-row', 'lens-frame-content', currentLensIndex === index ? 'active' : '']"
                  @click="handleSelectLens(index)"
                >
                  <div class="flex-column flex-center lens-frame-left">
                    <div class="lens-frame-image" :data-ratio="item['pictureScale']">
                      <el-image :src="downloadUrl + item.imageId">
                        <div slot="error" class="flex-column flex-center error-content">
                          <i class="el-icon-picture-outline" />
                          <span>暂无图片</span>
                        </div>
                      </el-image>
                      <span class="lens-no">{{ item['frameNo'] }}</span>
                      <span class="flex-row flex-center up-icon" @click.stop="handleLenUp(item, index)">
                        <i class="el-icon-arrow-up" />
                      </span>
                      <span class="flex-row flex-center down-icon" @click.stop="handleLenDown(item, index)">
                        <i class="el-icon-arrow-down" />
                      </span>
                    </div>
                  </div>
                  <!--                <div v-if="isShowPrompt === '1'" class="lens-frame-prompt">{{ item.prompt ? item.prompt : '无镜头提示词' }}</div>-->
                  <div class="lens-frame-delete" @click.stop="handleLensFrameDelete(item)">
                    <i class="el-icon-delete" />
                  </div>
                </div>
              </div>
              <div v-if="allLensList.length > 0" class="flex-row add-lens" @click="handleAddLens(null, allLensList.length - 1)">
                <i class="el-icon-circle-plus-outline" />
                <span style="font-size: 12px">添加</span>
              </div>
              <el-empty v-if="allLensList.length === 0" description="暂无分镜镜头" style="height: 100%">
                <template slot="image">
                  <img src="@/assets/common/empty_role.png">
                </template>
              </el-empty>
            </div>
          </div>
        </base-card>
      </el-col>
    </el-row>
    <!--图片上传-->
    <input
      ref="fileInput"
      type="file"
      accept=".png,.jpg,.jpeg"
      hidden
      @change="handleFileChange"
    >
    <!--图片预览-->
    <cs-image-viewer
      v-if="showImageViewer"
      :initial-index="initialIndex"
      :url-list="[previewImageUrl]"
      :on-close="() => { showImageViewer = false }"
    />
    <!--选择镜头-->
    <select-lens
      ref="select"
      single
      :lens-id="selectLens ? Number(selectLens['lensId']) : 0"
      @save="handleLensCheck"
    />
    <!--    更多标签-->
    <more-tag ref="more" @save="handleMoreTagSave" />
  </div>
</template>

<script src="./js/index.js" />
<style scoped lang="scss">
@import './css/index.scss';
</style>
